/**
 * 弹窗里的阈值设置
 * @author: tongsitong
 */

import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
import styled from "styled-components";
import SInputNumber from "../Input/InputNumber";
interface thresholdProps {
  className?: any;
  style?: any;
  title: string; // 股票/债券
  upperValue?: string; //初始值
  lowerValue?: string; //初始值
  isBoundError: boolean; // 是否上下限出错出红框
  setUpperValue: any; // 返回数据
  setLowerValue: any; // 返回数据
  setIsBoundError: any; // 修改数值时判断是否上限大于下限
}

interface changeInputProps {
  value: string;
  type: string; // upper/lower
  required: boolean;
}

const Content = forwardRef((props: thresholdProps, ref: any) => {
  const [upperValue, setUpperValue] = useState("");
  const [lowerValue, setLowerValue] = useState("");
  const [errorList, setErrorList] = useState([]);

  useImperativeHandle(ref, () => ({
    clearError, //取消红色方框
    checkError,
  }));

  const clearError = () => {
    setErrorList([]);
  };

  // 外部调用检查是否有错
  const checkError = () => {
    let list = [];
    if (upperValue === "") {
      list.push("upper");
    }
    if (lowerValue === "") {
      list.push("lower");
    }
  
    if (
      parseFloat(upperValue.toString()) <= parseFloat(lowerValue.toString())
    ) {
      list.push("both");
    }
    setErrorList([...list]);
  };
  const onChange = (data: changeInputProps) => {
    let list = [...errorList];
    if (data.type == "upper") {
      setUpperValue(data.value);
      props.setUpperValue(data.value);
    } else {
      setLowerValue(data.value);
      props.setLowerValue(data.value);
    }
    if (data.required) {
      if (data.value == "") {
        if (!list.includes(data.type)) {
          list.push(data.type);
        }
      } else {
        list.splice(
          list.findIndex((v) => v == data.type),
          1,
        );
      }
    }
    // 检查上限必须大于下限
    if (
      (data.type === "upper" && parseFloat(data.value.toString()) <= parseFloat(lowerValue.toString())) ||
      (data.type === "lower" && parseFloat(upperValue.toString()) <= parseFloat(data.value.toString()))
    ) {
      if (!list.includes("both")) {
        list.push("both");
      }
      props.setIsBoundError(true);
    }else{
      list.splice(
        list.findIndex((v) => v == "both"),
        1,
      );
      props.setIsBoundError(false);
    }
    setErrorList(list);
  };

  useEffect(() => {
    setUpperValue(props.upperValue);
    setLowerValue(props.lowerValue);
  }, [props.upperValue, props.lowerValue]);

  return (
    <div className={props.className} style={props.style}>
      <Title>{props.title}</Title>
      <LittleTitle>上限</LittleTitle>
      <SInputNumber
        style={{ marginRight: 18, width: "calc((100% - 142px) /2)", minWidth: 140 }}
        value={upperValue}
        suffix="%"
        min={-100}
        max={100}
        precision={2}
        isError={props.isBoundError || errorList.includes("upper") || errorList.includes("both")}
        onChange={(val) => {
          onChange({ value: val, type: "upper", required: true });
        }}
      />
      <LittleTitle>下限</LittleTitle>
      <SInputNumber
        style={{ width: "calc((100% - 142px) /2)", minWidth: 140 }}
        suffix="%"
        min={-100}
        max={100}
        precision={2}
        value={lowerValue}
        isError={props.isBoundError || errorList.includes("lower") || errorList.includes("both")}
        onChange={(val) => {
          onChange({ value: val, type: "lower", required: true });
        }}
      />
    </div>
  );
});

const Title = styled.div`
  width: 58px;
  line-height: 32px;
  text-align: center;
  font-size: 13px;
  color: #35425e;
  font-weight: 600;
  position: relative;
  margin-right: 12px;
  &:after {
    content: " ";
    width: 1px;
    height: 12px;
    background: #d4d7dd;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 10px;
  }
`;

const LittleTitle = styled.div`
  font-size: 13px;
  color: #35425e;
  width: 28px;
  min-width: 28px;
  margin-right: 4px;
  line-height: 32px;
`;
export const ThresholdSet = styled(Content)`
  display: flex;
  align-items: center;
  /* width: 441px; */
  width: calc(100% - 100px);
  min-width: 440px;
  height: 32px;
  background: #f5f6f8;
  border-radius: 2px;
  .ant-input-affix-wrapper {
    height: 24px;
    .ant-input{
      height: 21px;
    }
    .ant-input-suffix {
      color: #35425e;
      opacity: 0.4;
      margin-right: 8px;
    }
  }
`;
